// import React from "react"
// function ChildCom1(props) {
//     console.log("ChildCom1 渲染了")
//     return (
//         <div>
//             <div>ChildCom1</div>
//             <div>{props.counter}</div>
//         </div>
//     );
// }

// export default ChildCom1;

// 组件中定义了两个状态 *counter1* 和 *counter2*，在 *App* 组件内部修改 *counter1*，然后 *counter2* 作为 *porps* 传递给子组件，此时我们修改 *counter1* 的状态时，子组件也会跟着更新，原因很简单，因为父组件更新了，那你子组件当然要重新更新。

// 但是，我们发现，其实**<u>子组件的更新是没有必要的，因为传递给子组件的 *props* 并没有发生变化</u>**，此时我们就可以使用 *React.memo*，如下：

import React from "react"
function ChildCom1(props) {
    console.log("ChildCom1 渲染了")
    return (
        <div>
            <div>ChildCom1</div>
            <div>{props.counter}</div>
        </div>
    );
}

export default React.memo(ChildCom1);


// 注意：默认情况下其只会对复杂对象做浅层对比，如果你想要控制对比过程，那么请将自定义的比较函数通过第二个参数传入来实现。

// ```js
// function MyComponent(props) {
//   /* 使用 props 渲染 */
// }
// function areEqual(prevProps, nextProps) {
//   /*
//   如果把 nextProps 传入 render 方法的返回结果与
//   将 prevProps 传入 render 方法的返回结果一致则返回 true，
//   否则返回 false
//   */
// }
// export default React.memo(MyComponent, areEqual);
// ```